<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${pageContext.request.contextPath}/css/Style1.css"
	rel="stylesheet" type="text/css" />
<script language="javascript"
	src="${pageContext.request.contextPath}/js/public.js"></script>

<!-- 弹出层插件 -->
<link href="${pageContext.request.contextPath}/css/popup_layer.css"
	type="text/css" rel="stylesheet" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/popup_layer.js"></script>
<!-- 调用插件弹出层的方法 -->
<script type="text/javascript">
	$(function() {
		//弹出层插件调用
		new PopupLayer({
			trigger : ".clickedElement",
			popupBlk : "#showDiv",
			closeBtn : "#closeBtn",
			useOverlay : true
		});

	});
	function getInfoById(oid){
		//清理上一次显示的内容
		$("#showDivTab").html("");
		$("#shodDivOid").html("");
		$("#loading").css("display","block");
		//ajax异步访问数据
		$.post(
			"${pageContext.request.contextPath}/order",				
			{"oid":oid},
			function(data){
				
				//隐藏加载图片
				$("#loading").css("display","none");
				
				var content="<tr id='showTableTitle'><th width='20%'>快递名称</th><th width='25%'>快递要求</th><th width='20%'>目的地</th><th width='15%'>发单人收件时间</th><th width='20%'>价格</th></tr> ";	
				for(var i=0;i<data.length;i++){
					content+="<tr style='text-align: center;'>"+
					"<td>"+data[i].name+"</td>"+
					"<td>"+data[i].demand+"</td>"+
					"<td>"+data[i].goal+"</td>"+
					"<td>"+data[i].time+"</td>"+
					"<td><span class='subtotal'>"+data[i].price+"元</span></td>"+
				    "</tr>";
				}
				$("#showDivTab").html(content);
				
				//订单编号
				$("#shodDivOid").html(oid);
			},
			"json"
		);
	}
</script>

</HEAD>
<body>

	<form id="Form1" name="Form1"
		action="${pageContext.request.contextPath}/user/list.jsp"
		method="post">
		<table cellSpacing="1" cellPadding="0" width="100%" align="center"
			bgColor="#f5fafe" border="0">
			<TBODY>
				<tr>
					<td class="ta_01" align="center" bgColor="#afd1f3"><strong>订单列表</strong>
					</TD>
				</tr>

				<tr>
					<td class="ta_01" align="center" bgColor="#f5fafe">
						<table cellspacing="0" cellpadding="1" rules="all"
							bordercolor="gray" border="1" id="DataGrid1"
							style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; WORD-BREAK: break-all; BORDER-BOTTOM: gray 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word">
							<tr
								style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #afd1f3">

								<td align="center" width="10%">序号</td>
								<td align="center" width="10%">订单编号</td>
								<td align="center" width="10%">发单人</td>
								<td align="center" width="10%">接单人</td>
								<td align="center" width="10%">订单状态</td>
								<td align="center" width="50%">订单详情</td>
							</tr>

							<c:forEach items="${order }" varStatus="vs" var="i">
								<tr onmouseover="this.style.backgroundColor = 'white'"
									onmouseout="this.style.backgroundColor = '#F5FAFE';">
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="18%">${vs.count }</td>
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="17%">${i.num }</td>
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="17%">${i.s_people }</td>
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="17%">${i.r_people }</td>
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="17%">${i.statue }</td>
									<td align="center" style="HEIGHT: 22px"><input
										type="button" value="订单详情" class="clickedElement" onclick="getInfoById('${i.num }')" />
									</td>

								</tr>


							</c:forEach>


						</table>
					</td>
				</tr>

			</TBODY>
		</table>
	</form>

	<!-- 弹出层 HaoHao added -->
	<div id="showDiv" class="blk" style="display: none;">
		<div class="main">
			<h2>
				订单编号：<span id="shodDivOid" style="font-size: 13px; color: #999">123456789</span>
			</h2>
			<a href="javascript:void(0);" id="closeBtn" class="closeBtn">关闭</a>
			<div id="loading" style="padding-top: 30px; text-align: center;">
				<img alt=""
					src="${pageContext.request.contextPath }/images/loading.gif">
			</div>
			 <div style="padding: 20px;">
				<table id="showDivTab" style="width: 100%">
					<%-- <tr id='showTableTitle'>
						<th width='20%'>快递名称</th>
						<th width='25%'>快递要求</th>
						<th width='20%'>目的地</th>
						<th width='15%'>发单人收件时间</th>
						<th width='20%'>价格</th>
					</tr>
					<c:forEach items="${info }"  var="i" ></c:forEach>
					<tr style='text-align: center;'>
						<td>${i.name }</td>
						<td><a target='_blank'>${i.demand }</a></td>
						<td>${i.goal }</td>
						<td>${i.time }</td>
						<td><span class='subtotal'>${i.price }元</span></td>
					</tr>
 --%>


				</table>
			</div> 
		</div>

	</div>


</body>
</HTML>

